<template>
  <div class="address">
    <el-card>
      <el-button
        class="insbut"
        type="primary"
        size="mini"
        icon="el-icon-circle-plus-outline"
        @click="dialogFormVisible = true"
        >新增收获地址</el-button
      >
      <div class="conter">
        <el-table :data="tableData" border stripe>
          <el-table-column
            type="index"
            :index="indexNum"
            label="序号"
            width="60"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="id" label="收货地址ID" width="" align="center">
          </el-table-column>
          <el-table-column prop="province" label="省份" width="" align="center">
          </el-table-column>
          <el-table-column prop="city" label="城市" width="" align="center">
          </el-table-column>
          <el-table-column prop="region" label="地区" width="" align="center">
          </el-table-column>
          <el-table-column
            prop="detail"
            label="收货详细地址"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="收货人姓名"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="phone"
            label="收货人电话"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="postcode"
            label="邮政编码"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="createtime"
            label="创建时间"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="updatetime"
            label="修改时间"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="state"
            label="是否为默认地址"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" width="" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="Edituser(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="Deleteaddress(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 弹框新增或编辑地址 -->
      <el-dialog
        :title="isEdit ? '编辑' : '新增收到地址'"
        :visible.sync="dialogFormVisible"
      >
        <el-form :model="form">
          <el-form-item
            v-if="isEdit"
            label="收获地址Id"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="form.id"
              autocomplete="off"
              readonly
              title="不可修改"
            ></el-input>
          </el-form-item>
          <el-form-item label="选择地区" :label-width="formLabelWidth">
            <el-cascader
              size="large"
              :options="options"
              v-model="selectedOptions"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="省份" :label-width="formLabelWidth">
            <el-input v-model="form.province" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="城市" :label-width="formLabelWidth">
            <el-input v-model="form.city" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地区" :label-width="formLabelWidth">
            <el-input v-model="form.region" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="收货详细地址" :label-width="formLabelWidth">
            <el-input v-model="form.detail" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="收货人姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="收货人电话" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="收获地邮政编码" :label-width="formLabelWidth">
            <el-input v-model="form.postcode" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button v-if="isEdit" type="primary" @click="updateaddress()"
            >提 交</el-button
          >
          <el-button v-else type="primary" @click="insertaddress()"
            >上 传</el-button
          >
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { regionDataPlus, CodeToText } from "element-china-area-data";
export default {
  data() {
    return {
      options: regionDataPlus,
      selectedOptions: [],
      tableData: [],
      dialogFormVisible: false,
      isEdit: false,
      formLabelWidth: "120px",
      form: {
        name: "",
        phone: "",
        province: "",
        city: "",
        region: "",
        detail: "",
        postcode: "",
        user_id: sessionStorage.getItem("id")
      }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 获取用户所以地址地址
    init() {
      const id = this.form.user_id;
      this.$http.post("/getalladdress", { id }).then(res => {
        // console.log(res);
        if (res.status == 200) {
          this.tableData = res.data;
          for (let i in this.tableData) {
            if (this.tableData[i].state == 1) {
              this.tableData[i].state = "是";
            } else {
              this.tableData[i].state = "否";
            }
          }
        }
      });
    },
    // 提交图片和数据去服务器 插入数据
    insertaddress() {
      const that = this;
      that.$http
        .post("/insertaddress", that.form)
        .then(res => {
          if (res.status == 200) {
            that.$message({
              message: "上传成功...",
              type: "success"
            });
            that.init();
          } else {
            that.$message({
              message: "上传失败...",
              type: "error"
            });
          }
          // console.log(res);
          that.dialogFormVisible = false;
          that.form.phone = null;
          that.form.name = null;
          that.form.province = null;
          that.form.city = null;
          that.form.region = null;
          that.form.detail = null;
          that.form.postcode = null;
        })
        .catch(function() {});
    },
    //编辑图书 返回数据到表单
    Edituser(item) {
      this.isEdit = true;
      this.dialogFormVisible = true;
      this.form = JSON.parse(JSON.stringify(item));
    },
    //更新编辑好的图书
    updateaddress() {
      const that = this;
      that.$http
        .post("/updateaddress", that.form)
        .then(res => {
          console.log(res);
          if (res.status == 204) {
            that.$message({
              message: "更新数据成功...",
              type: "success"
            });
            that.init();
            that.dialogFormVisible = false;
            that.isEdit = false;
          } else {
            that.$message({
              message: "更新数据失败...",
              type: "error"
            });
          }
          // console.log(res);
          that.dialogFormVisible = false;
          that.form.phone = null;
          that.form.name = null;
          that.form.province = null;
          that.form.city = null;
          that.form.region = null;
          that.form.detail = null;
          that.form.postcode = null;
        })
        .catch(function() {});
    },
       //软删除数据 可恢复
    Deleteaddress(id) {
      const that = this;
      that
        .$confirm("此操作将删除地址不可恢复, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        })
        .then(() => {
          that.$http.post("/deleteaddress", { id }),
            that.$message({
              type: "success",
              message: "删除成功!"
            });
          for (let i in that.tableData) {
            if (that.tableData[i].id == id) {
              that.tableData.splice(i, 1); //删除不请求数据，直接在数组中删除
              break;
            }
          }
        })
        .catch(() => {
          that.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //element table自带序号
    indexNum(index) {
      return index + 1;
    },
    // 解析地区状态码为汉字地名
    handleChange(arr) {
      this.form.province = CodeToText[arr[0]];
      this.form.city = CodeToText[arr[1]];
      this.form.region = CodeToText[arr[2]];
    }
  }
};
</script>

<style scoped>
</style>